<!-- 
购物车页面
 * @Author: zuobufan
 * @Location: 中杰科技研发中心
 * @LastEditors: zuobufan
 * @CreateEditTime: 2021-09-28 13:31:00
 -->
<template>
  <div>
    <Tips/>
    <div class="card">
      <van-checkbox-group v-model="result">
        <van-checkbox
          v-for="item in cartList"
          :key="item.id"
          :disabled="editStatus"
          :label-disabled="editStatus"
          :name="item.product_id"
          @click="checkboxClick(item)"
        >
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.retail_price.toFixed(2)"
              :thumb="item.list_pic_url"
              :title="item.goods_name"
            >
              <template #footer>
                <van-stepper
                  v-model="item.number"
                  integer
                  min="1"
                  v-show="editStatus"
                  @change="StepRes(item)"
                />
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="DelGoods(item.product_id)"
              />
            </template>
          </van-swipe-cell>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <!--  -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount * 100" button-text="提交订单">
      <van-checkbox v-model="AllChecked">全选</van-checkbox>
      <template #tip>
        累计共{{ cartTotal.goodsCount }}件商品可点击
        <van-button
          :type="editStatus?'danger':'primary'"
          size="small"
          @click="editStateChange"
        >{{ editStatus ? "完成编辑" : "编辑" }}</van-button>按钮进行商品数量进行修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import {
  GetCartDataApi,
  GoodsSelectApi,
  GetStepData,
  DelGoodsData
} from "@/request/api";
export default {
  components: {
    Tips
  },
  data() {
    return {
      result: [], //复选框
      cartList: {}, //商品总列表
      cartTotal: {}, //购物车数据
      editStatus: false //编辑状态，默认false
    };
  },

  computed: {
    // 全选框checkbox的值
    AllChecked: {
      get() {
        return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount;
      },
      set(val) {
        // 重新获取整个cartList数组的product_id，拼成一个 productIds数组
        let arrlist = [];
        this.cartList.map(item => {
          arrlist.push(item.product_id);
        });

        // 切换全选状态
        GoodsSelectApi({
          isChecked: val ? 1 : 0,
          productIds: arrlist.join()
        }).then(res => {
          // 重新渲染当前页面数据
          console.log(res);
          if (res.errno == 0) {
            this.successFn(res.data);
          }
        });
      }
    }
  },
  methods: {
    // 步近器请求
    StepRes(item) {
      GetStepData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(res => {
        console.log(res);
        if (res.errno == 0) {
          this.successFn(res.data);
        }
      });
    },
    // 列表单击状态
    checkboxClick(item) {
      if (!this.editStatus) {
        GoodsSelectApi({
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id
        }).then(res => {
          console.log(res);
          if (res.errno == 0) {
            this.successFn(res.data);
          }
        });
      }
    },
    // 编辑修改
    editStateChange() {
      this.editStatus = !this.editStatus;
    },
    // 删除商品
    DelGoods(id) {
      DelGoodsData({
        productIds: id.toString()
      }).then(res => {
        console.log(res);
        if (res.errno == 0) {
          this.successFn(res.data);
        }
      });
    },
    successFn(arg) {
      this.cartList = arg.cartList;
      this.cartTotal = arg.cartTotal;
      this.result = []; //清空result

      this.cartList.map(item => {
        if (item.checked === 1) {
          this.result.push(item.product_id);
        }
      });
    }
  },
  created() {
    GetCartDataApi().then(res => {
      console.log(res);
      if (res.errno == 0) {
        this.successFn(res.data);
      }
    });
  }
};
</script>
<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
  .van-submit-bar__tip {
    display: flex;
    align-items: center;
    .van-button {
      margin: 0 2px;
    }
  }
}
.card {
  padding-bottom:5px;
  /deep/.van-checkbox-group {
    margin-bottom: 150px;
    background: #fff;
    padding: 0 10px;
    .van-checkbox {
      border-bottom: 1px solid #ccc;
      .van-checkbox__label {
        border-bottom: 1px solid #ccc;
        flex: 1;
      }
    }
  }
}
.van-swipe-cell__right {
  .delete-button {
    height: 100%;
  }
}
</style>
